<template>
    <div>
        <el-card style="margin:20px 20px">
            <!-- scene为0时为 -->
            <CategorySelect @getCategoryId='getCategoryId' :show="scene!=0" />
        </el-card>
        <el-card style="margin:20px 20px">
            <div v-show="scene == 0">
                <!-- disabled：没有category3Id时禁用此按钮  -->
                <el-button type="primary" icon="el-icon-plus" @click="addSpu" :disabled="!category3Id">添加SPU
                </el-button>
                <!-- 表格：展示平台属性 -->
                <el-table style="width: 100%" border :data="this.records">
                    <el-table-column type="index" label="序号" width="80" align='center'>
                    </el-table-column>
                    <el-table-column prop="spuName" label="spu名称" width="width">
                    </el-table-column>
                    <el-table-column prop="description" label="spu描述" width="width">
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{row,$index}">
                            <!-- 这里按钮之后用hintButton替换 -->
                            <el-button type="success" icon="el-icon-plus" size="mini" title="添加sku"
                                @click="addSku(row)"></el-button>
                            <el-button type="warning" icon="el-icon-edit" size="mini" title="修改spu"
                                @click="updateSpu(row)"> </el-button>
                            <el-button type="info" icon="el-icon-info" size="mini" title="查看当前spu全部sku列表"
                                @click="handler(row)"></el-button>
                            <el-popconfirm title="确定删除吗？" @onConfirm="deleteSpu(row)">
                                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                    title="删除spu"></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align:center" :current-page="page" :page-sizes="[3, 6, 9]" :page-size="limit"
                    layout="prev, pager, next, jumper,->,sizes,total" @current-change="getSpuList"
                    @size-change="handleSizeChange" :total="total">
                </el-pagination>
            </div>
            <SpuForm v-show="scene == 1" @changeScene='changeScene' ref="spu"></SpuForm>
            <SkuForm v-show="scene == 2" @changeScenes='changeScenes' ref="sku"></SkuForm>

            <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" @closed='close'>
                <el-table :data="skuList" style="width:100%" border v-loading="loading">
                    <el-table-column prop="skuName" label="名称" width="width"></el-table-column>
                    <el-table-column prop="price" label="价格" width="width"></el-table-column>
                    <el-table-column prop="weight" label="重量" width="width"></el-table-column>
                    <el-table-column prop="prop" label="默认图片" width="width">
                        <template slot-scope="{row,$index}">
                            <img :src="row.skuDefaultImg" style="width:100px;height:100px">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import SkuForm from "./SkuForm";
import SpuForm from "./SpuForm";
export default {
    name: 'Spu',
    components: { SpuForm, SkuForm },
    data() {
        return {
            category1Id: '',
            category2Id: '',
            category3Id: '',
            show: true,      //控制三级联动的可操作性
            page: 1,          //当前第几页
            limit: 3,        //每页展示多少数据
            records: [],     //当前页spu列表的数据量
            total: 0,        //分页器一共需要展示数据的条数
            scene: 0,         //0代表展示SPU列表数据 1添加SPU|修改SPU 2添加SKU
            //控制对话框的显示与隐藏
            dialogTableVisible:false,  
            spu:{}, 
            skuList:[],       //sku列表数据
            loading:true,     //sku列表载入表现
        };
    },
    mounted() {

    },
    methods: {
        //三级联动的自定义事件的回调，吧子组件的id传给父组件
        getCategoryId({ categoryId, level }) {
            if (level == 1) {
                this.category1Id = categoryId;
                //清除二三级id
                this.category2Id = '';
                this.category3Id = '';
            }
            else if (level == 2) {
                this.category2Id = categoryId;
                //清除三级id
                this.category3Id = '';
            } else {
                this.category3Id = categoryId;
                //发请求获取spu列表数据进行展示
                this.getSpuList();
            }
        },
        //获取Spu数据列表的方法
        async getSpuList(pages = 1) {
            //实现分页器的跳转数据列表变化
            this.page = pages;

            const { page, limit, category3Id } = this;
            //发请求时需要携带三个参数
            let result = await this.$API.spu.reqSpuList(page, limit, category3Id);
            if (result.code == 200) {
                this.records = result.data.records;
                this.total = result.data.total;
            }
        },
        //分页器的每页展示数量变化回调
        handleSizeChange(limit) {
            //修改参数
            this.limit = limit;
            //发送请求
            this.getSpuList();
        },
        //添加Spu按钮回调
        addSpu() {
            this.scene = 1;
            this.$refs.spu.addSpuData(this.category3Id);
        },
        //修改某一个Spu回调
        updateSpu(row) {
            this.scene = 1;
            //在父组件可以通过$refs获得子组件
            //获取子组件，然后运行子组件里的函数（发请求）
            this.$refs.spu.initSpuData(row);
        },
        //自定义事件回调（spuForm）
        changeScene({ scene, flag }) {
            //flag形参是为了区分按钮是添加还是修改
            // 切换场景
            this.scene = scene;
            //重新获取数据，并定位到当前页
            if (flag == '修改') {
                this.getSpuList(this.page);
            } else {
                this.getSpuList();
            }
        },
        //删除SPU按钮回调
        async deleteSpu(row) {
            //发送请求
            let result = await this.$API.spu.reqDeleteSpu(row.id);
            if (result.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                //如果当前页数据大于1，停留在本页，等于1则删除后跳到前一页
                this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
            } else {
                this.$message.error('删除失败');
            }
        },
        //添加Sku按钮回调
        addSku(row) {
            //切换场景为2
            this.scene = 2;
            //获取子组件，然后运行子组件里的函数（发请求）
            this.$refs.sku.getData(this.category1Id, this.category2Id, row);
        },
        //sku通知父组件切换场景
        changeScenes() {
            this.scene = 0;
            this.getSpuList();
        },
        //查看sku按钮回调
        async handler(row) {
            //对话框显示
            this.dialogTableVisible=true;
            this.spu=row;
            let result = await this.$API.spu.reqSkuList(row.id)
            if (result.code==200) {
                this.skuList=result.data;
                this.loading=false;
            }
        },
        //关闭对话框
        close(){
            //清空数据
            this.skuList=[];
            //重设loading效果
            this.loading=true;
        }
    }
}
</script>

<style lang="scss" scoped>

</style>